<template>
  <div>
    <!-- <div style="margin-top: 10px">
            <span class="title">系统信息&nbsp;/</span>
            <span class="vtitle">集成处理器</span>
        </div> -->
    <el-row>
      <el-col :span="12" style="display:flex;justify-content:center;align-items:center">
        <div class="grid-content bg-white" style="width:700px">
          <el-card style="max-width: 800px">
            <template #header>
              <div class="card-header" style="font-size: 20px; font-weight: bold">
                <span>运行环境</span>
              </div>
            </template>
            <div>
              <div style="margin: 20px 20px; display: flex;">
                <div style="flex:1">操作系统：</div>
                <div style="flex:1">Windows 10</div>
                <div style="flex:1">处理器：</div>
                <div style="flex:1">Intel Core i5</div>
              </div>
              <div style="margin: 10px 20px; display: flex;">
                <div style="flex:1">内存：</div>
                <div style="flex:1">16GB</div>
                <div style="flex:1">硬盘：</div>
                <div style="flex:1">512GB SSD</div>
              </div>
              <div style="margin: 20px 20px; display: flex;">
                <div style="flex:1">显卡：</div>
                <div style="flex:1">NVIDIA</div>
                <div style="flex:1">显示器：</div>
                <div style="flex:1">24英寸</div>
              </div>
              <div style="margin: 10px 20px; display: flex;">
                <div style="flex:1">声卡：</div>
                <div style="flex:1">Realtek ALC887</div>
                <div style="flex:1">网络：</div>
                <div style="flex:1">千兆以太网</div>
              </div>
            </div>
          </el-card>
        </div>
      </el-col>
      <el-col :span="12" style="display:flex;justify-content:center;align-items:center">
        <div class="grid-content bg-white" style="width:700px">
          <el-card style="max-width: 800px">
            <template #header>
              <div class="card-header" style="font-size: 20px; font-weight: bold">
                <span>CPU</span>
              </div>
            </template>
            <div style="margin: 0 20px">
              <p>详情：intel xeon@Gold 6148 @2.4Ghz</p>
              <div style="
                                    display: flex;
                                    justify-content: space-between;
                                    margin: 15px 0;
                                ">
                <div> 负载： </div>
                <div style="width: 400px">
                  <el-progress :stroke-width="24" :percentage="60" />
                </div>
              </div>
              <div style="
                                    display: flex;
                                    justify-content: space-between;
                                    margin: 15px 0;
                                ">
                <div> 核心1负载： </div>
                <div style="width: 400px">
                  <el-progress :percentage="60" :stroke-width="24" />
                </div>
              </div>
              <div style="
                                    display: flex;
                                    justify-content: space-between;
                                    margin: 15px 0;
                                ">
                <div> 核心2负载： </div>
                <div style="width: 400px">
                  <el-progress :stroke-width="24" :percentage="60" />
                </div>
              </div>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12" style="display:flex;justify-content:center;align-items:center">
        <div class="grid-content bg-white" style="width:700px">
          <el-card style="max-width: 800px">
            <template #header>
              <div class="card-header" style="font-size: 20px; font-weight: bold">
                <span>磁盘</span>
              </div>
            </template>
            <div style="
                                display: flex;
                                justify-content: space-between;
                            ">
              <div style="margin: 0 20px">
                <p style="margin: 40px 0">总空间：180GB</p>
                <p style="margin: 40px 0">已用空间：150.3GB</p>
                <p style="margin: 40px 0">可用空间：20.7GB</p>
              </div>
              <div style="margin: 0 20px;">
                <div id="diskUsed" style="width: 200px; height: 200px"></div>
              </div>
            </div>
          </el-card>
        </div>
      </el-col>
      <el-col :span="12" style="display:flex;justify-content:center;align-items:center">
        <div class="grid-content bg-white" style="width:700px">
          <el-card style="max-width: 800px">
            <template #header>
              <div class="card-header" style="font-size: 20px; font-weight: bold">
                <span>内存</span>
              </div>
            </template>
            <div style="
                                display: flex;
                                justify-content: space-between;
                            ">
              <div style="margin: 0 20px">
                <p style="margin: 40px 0">总内存：2GB</p>
                <p style="margin: 40px 0">已用内存：1.92GB</p>
                <p style="margin: 40px 0">可用内存：0.8GB</p>
              </div>
              <div style="margin: 0 20px;">
                <div id="memoryUsed" style="width: 200px; height: 200px"></div>
              </div>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-white">
          <div id="memoryAndDisk" style="width: auto; height: 400px"></div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'UserList',
  data: function () {
    return {
      optionbarline: {
        title: {
          text: '磁盘 内存 CPU',
          x: '10px',
          // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
          y: '0px',
          // itemGap设置主副标题纵向间隔，单位px，默认为10，
          itemGap: 20,
          backgroundColor: '#EEE',
          // 主标题文本样式设置
          textStyle: {
            fontSize: 16,
            fontWeight: '500',
            color: '#000000'
          }
        },
        legend: {
          data: ['磁盘', '内存', 'CPU'],
          x: 'right',
          // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
          y: 'top',
          textStyle: {
            color: '#666' // 图例文字颜色
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLine: {
            show: false
          },
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: false
          }
        },
        series: [{
          name: '磁盘',
          data: [820, 932, 901, 934, 1290, 1330, 1320, 780, 880, 560, 120, 450],
          type: 'line',
          smooth: true,
          symbol: 'none'
        },
        {
          name: '内存',
          data: [720, 732, 901, 974, 1290, 1330, 1320, 990, 1300, 1100, 880, 650],
          type: 'line',
          smooth: true,
          symbol: 'none'
        },
        {
          name: 'CPU',
          data: [920, 732, 951, 974, 1090, 930, 1120, 1400, 1200, 1100, 1300, 890],
          type: 'line',
          smooth: true,
          symbol: 'none'
        }
        ],
        color: ['#0379FF', '#FEA501', '#13E1E1']
      }
    }
  },
  methods: {
    // 图表1：空间
    initCharts1() {
      const myChart = echarts.init(document.getElementById('diskUsed'))
      let data = [
        {
          name: '已用空间',
          value: 150.3
        },
        {
          name: '可用空间',
          value: 29.7
        }
      ]
      var subText = ((150.3) / 180).toFixed(2) * 100
      myChart.setOption({
        // 环形图中间文字
        title: {
          subtext: subText,
          textStyle: {
            fontSize: 20,
            color: 'black',
            fontWeight: 400
          },
          subtextStyle: {
            fontSize: 16,
            color: 'black',
            fontWeight: 500
          },
          textAlign: 'center', // 图例文字居中显示
          x: '38%', // 距离左边的距离
          y: '37%' // 距离上边的距离
        },
        // 数据的颜色设置
        color: ['orange', 'gray'],
        // 鼠标移入显示的文字
        tooltip: {
          trigger: 'item',
          formatter: '({d}%)'
        },
        series: [
          {
            radius: ['50%', '80%'], // 第一个是中间圆的大小，第二个是外边圆的大小
            center: ['40%', '50%'], // 左边的距离，上边的距离
            type: 'pie',
            label: {
              normal: {
                formatter: function (data) {
                  // .toFixed(0)去掉小数位，如果为2就是保留两位小数
                  let b = data.percent.toFixed(2) + '%'
                  subText = b
                  return b
                },
                position: 'inner', // 文字显示在内部，如果在外边把这个去掉就好
                color: '#fff' // 文字的颜色
              }
            },
            data: data
          }
        ]
      })
      // 图表自适应大小
      window.onresize = () => {
        myChart.resize()
      }
    },
    // 图表2：内存
    initCharts2() {
      const myChart = echarts.init(document.getElementById('memoryUsed'))
      let data = [
        {
          name: '已用内存',
          value: 1.92
        },
        {
          name: '可用内存',
          value: 0.8
        }
      ]
      var subText = ((1.92) / 2).toFixed(2) * 100
      myChart.setOption({
        // 环形图中间文字
        title: {
          subtext: subText,
          textStyle: {
            fontSize: 20,
            color: 'black',
            fontWeight: 400
          },
          subtextStyle: {
            fontSize: 16,
            color: 'black',
            fontWeight: 500
          },
          textAlign: 'center', // 图例文字居中显示
          x: '38%', // 距离左边的距离
          y: '37%' // 距离上边的距离
        },
        // 数据的颜色设置
        color: ['orange', 'gray'],
        // 鼠标移入显示的文字
        tooltip: {
          trigger: 'item',
          formatter: '({d}%)'
        },
        series: [
          {
            radius: ['50%', '80%'], // 第一个是中间圆的大小，第二个是外边圆的大小
            center: ['40%', '50%'], // 左边的距离，上边的距离
            type: 'pie',
            label: {
              normal: {
                formatter: function (data) {
                  // .toFixed(0)去掉小数位，如果为2就是保留两位小数
                  let b = data.percent.toFixed(2) + '%'
                  subText = b
                  return b
                },
                position: 'inner', // 文字显示在内部，如果在外边把这个去掉就好
                color: '#fff' // 文字的颜色
              }
            },
            data: data
          }
        ]
      })
      // 图表自适应大小
      window.onresize = () => {
        myChart.resize()
      }
    },
    // 图表3：内存和磁盘
    initCharts3() {
      const myChart = echarts.init(
        document.getElementById('memoryAndDisk')
      )
      myChart.setOption(this.optionbarline)
      // 图表自适应大小
      window.onresize = () => {
        myChart.resize()
      }
    }
  },
  created() {
  },
  mounted() {
    this.initCharts1()
    this.initCharts2()
    this.initCharts3()
  }
}

</script>

<style scoped>
.el-row {
  margin: 20px;
}

.el-col {
  border-radius: 4px;
}

.bg-white {
  background: #fff;
  color: #333;
  padding: 10px;
  border-radius: 4px;
  border: 1px solid #ebeef5;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.title {
  font-size: 18px;
  color: #333;
}
</style>
